<template>
  <el-container>
    <el-header>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-menu
                :router="true"
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                mode="horizontal"
                float="left"
                active-text-color="#ffd04b">
              <el-menu-item index="/square">
                <i class="el-icon-collection"></i>
                <span>社区</span>
              </el-menu-item>
              <el-menu-item index="/papers">
                <i class="el-icon-chat-dot-square"></i>
                <span>试卷库</span>
              </el-menu-item>
              <el-menu-item index="/mine">
                <i class="el-icon-user"></i>
                <span>个人资料</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="8">
          <el-autocomplete
              class="inline-input"
              v-model="inputValue"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              :trigger-on-focus="false"
              @select="handleSelect">
            <template slot="append">
              <el-button type="success" icon="el-icon-search" @click="search()">搜索</el-button>
            </template>
          </el-autocomplete>
        </el-col>
      </el-row>
    </el-header>
    <el-container style="height: 70%">
      <el-main style="background-color: #f3f6f9">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      user: this.$sessionGet(),
      inputValue: '',
      restaurants: [],
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    searchHot() {
      this.$axios.get("hot/searchHot")
          .then(resp => {
            let res = resp.data;
            this.restaurants = res.data;
            console.log("remen")
            console.log(res.data)
          })
          .catch(error => {
            console.log(error)
          })
    },
    handleSelect(item) {
      console.log(item);
    },
    search() {
      this.$axios.post("hot/setHot", this.$qs.stringify({obj: this.inputValue}))
          .then(resp => {
            let res = resp.data;
            this.inputValue = '';
          })
          .catch(error => {
            console.log(error)
          })
      let routeUrl = this.$router.resolve({
        path: "/search",
        query: {
          obj: this.inputValue
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
  },
  created() {
    this.searchHot();
  },

}
</script>


<style scoped>

.el-button {
  background-color: #409eff;
}

.el-container {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px !important;
  /*外部间距也是如此设置*/
  margin: 0px !important;
  /*统一设置高度为100%*/
  height: 100%;
}

.el-header, .el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
  height: 30%;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  /*line-height: 160px;*/
  padding: 0;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu {
  /*解决1px elementui出现展开后子菜单宽度多出1px问题*/
  border: none;
  border-right-width: 0;
}


.titleInf {
  /*margin-left:400px;*/
  display: flex;
  justify-content: left;
  /*flex-direction: row;*/
  /*align-items: center;*/
}

.titleLogo {
  /*margin-left:400px;*/
  display: flex;
  height: 60px;
  /*flex-direction: row;*/
  align-items: center;
  justify-content: space-between;
}

.search-item {
  padding: 10px;
  cursor: pointer;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-item:hover {
  background-color: #f5f5f5;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.autocomplete-item img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50%;
}
</style>